@if (appendBox) {
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="target"
    [cdkConnectedOverlayOpen]="true"
    [cdkConnectedOverlayDisableClose]="true"
  >
    <ng-container *ngTemplateOutlet="sharedPopoverContent"></ng-container>
  </ng-template>
} @else {
  <ng-container *ngTemplateOutlet="sharedPopoverContent"></ng-container>
}

<ng-template #sharedPopoverContent>
  <div #popoverElement [hidden]="isHidden" class="po-popover" [ngClass]="customClasses()">
    @if (!hideArrow) {
      <div class="po-popover-arrow po-arrow-{{ arrowDirection }}"></div>
    }

    <div class="po-popover-content">
      @if (title) {
        <span class="po-popover-title">{{ title }}</span>
      }
      <ng-content></ng-content>
    </div>
  </div>
</ng-template>
